<template>
  <PageLayout 
    title="组件测试页面" 
    description="测试新创建的单选框和复选框组件"
  >
    <div class="space-y-8">
      <!-- 单选框测试 -->
      <div class="card">
        <h2 class="text-xl font-semibold mb-4">单选框组件测试</h2>
        <div class="space-y-4">
          <div>
            <h3 class="text-lg font-medium mb-2">AI生成标识</h3>
            <div class="flex items-center space-x-4">
              <UiRadio
                v-model="aiGeneration"
                :value="true"
                name="ai-generation-test"
                size="sm"
              >
                AI生成
              </UiRadio>
              <UiRadio
                v-model="aiGeneration"
                :value="false"
                name="ai-generation-test"
                size="sm"
              >
                人工创作
              </UiRadio>
            </div>
            <p class="text-sm text-text-muted mt-2">当前选择: {{ aiGeneration ? 'AI生成' : '人工创作' }}</p>
          </div>

          <div>
            <h3 class="text-lg font-medium mb-2">不同尺寸</h3>
            <div class="flex items-center space-x-4">
              <UiRadio v-model="sizeTest" :value="'sm'" name="size-test" size="sm">小尺寸</UiRadio>
              <UiRadio v-model="sizeTest" :value="'md'" name="size-test" size="md">中尺寸</UiRadio>
              <UiRadio v-model="sizeTest" :value="'lg'" name="size-test" size="lg">大尺寸</UiRadio>
            </div>
          </div>

          <div>
            <h3 class="text-lg font-medium mb-2">禁用状态</h3>
            <div class="flex items-center space-x-4">
              <UiRadio v-model="disabledTest" :value="true" name="disabled-test" :disabled="true">禁用选项1</UiRadio>
              <UiRadio v-model="disabledTest" :value="false" name="disabled-test" :disabled="true">禁用选项2</UiRadio>
            </div>
          </div>
        </div>
      </div>

      <!-- 复选框测试 -->
      <div class="card">
        <h2 class="text-xl font-semibold mb-4">复选框组件测试</h2>
        <div class="space-y-4">
          <div>
            <h3 class="text-lg font-medium mb-2">AI评论选项</h3>
            <div class="flex items-center space-x-4">
              <UiCheckbox v-model="aiComment" size="sm">
                AI评论
              </UiCheckbox>
              <UiCheckbox v-model="showNotifications" size="sm">
                显示通知
              </UiCheckbox>
            </div>
            <p class="text-sm text-text-muted mt-2">
              状态: AI评论({{ aiComment }}), 通知({{ showNotifications }})
            </p>
          </div>

          <div>
            <h3 class="text-lg font-medium mb-2">不同尺寸</h3>
            <div class="flex items-center space-x-4">
              <UiCheckbox v-model="sizeTestCheckbox" size="sm">小尺寸</UiCheckbox>
              <UiCheckbox v-model="sizeTestCheckbox" size="md">中尺寸</UiCheckbox>
              <UiCheckbox v-model="sizeTestCheckbox" size="lg">大尺寸</UiCheckbox>
            </div>
          </div>

          <div>
            <h3 class="text-lg font-medium mb-2">禁用状态</h3>
            <div class="flex items-center space-x-4">
              <UiCheckbox v-model="disabledCheckbox" :disabled="true">禁用复选框</UiCheckbox>
            </div>
          </div>
        </div>
      </div>

      <!-- 实际使用场景模拟 -->
      <div class="card">
        <h2 class="text-xl font-semibold mb-4">实际使用场景</h2>
        <div class="space-y-6">
          <!-- 评论区模拟 -->
          <div class="bg-background-800 rounded-xl p-4">
            <h3 class="text-lg font-medium mb-3">评论区</h3>
            <textarea 
              v-model="commentText"
              placeholder="分享你的想法..."
              class="input w-full resize-none mb-3"
              rows="3"
            ></textarea>
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-4 text-sm text-text-muted">
                <UiCheckbox 
                  v-model="isAiComment" 
                  size="sm"
                >
                  AI评论
                </UiCheckbox>
              </div>
              <UiButton variant="primary" size="sm">发表评论</UiButton>
            </div>
          </div>

          <!-- 上传表单模拟 -->
          <div class="bg-background-800 rounded-xl p-4">
            <h3 class="text-lg font-medium mb-3">上传表单</h3>
            <div>
              <label class="block text-sm font-medium mb-2">AI生成标识</label>
              <div class="flex items-center space-x-4">
                <UiRadio
                  v-model="formAiGeneration"
                  :value="true"
                  name="form-ai-generation"
                  size="sm"
                >
                  AI生成
                </UiRadio>
                <UiRadio
                  v-model="formAiGeneration"
                  :value="false"
                  name="form-ai-generation"
                  size="sm"
                >
                  人工创作
                </UiRadio>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </PageLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PageLayout from '../components/layout/PageLayout.vue'
import { UiRadio, UiCheckbox, UiButton } from '../components/ui'

// 单选框测试数据
const aiGeneration = ref(false)
const sizeTest = ref('md')
const disabledTest = ref(true)

// 复选框测试数据
const aiComment = ref(false)
const showNotifications = ref(true)
const sizeTestCheckbox = ref(true)
const disabledCheckbox = ref(false)

// 实际场景模拟数据
const commentText = ref('')
const isAiComment = ref(false)
const formAiGeneration = ref(false)
</script>
